<template>
  <div class="sku">
    <el-dialog
      :model-value="isShow"
      title="编辑货品信息"
      @close="$emit('hide')"
    >
      <div class="search">
        商品货号：
        <el-input
          v-model="SKUVal"
          placeholder="按sku编号搜索"
          class="input-with-select"
        >
          <template #append>
            <el-button :icon="Search" />
          </template>
        </el-input>
      </div>
      <el-table border :data="tableData" style="width: 100%">
        <el-table-column
          align="center"
          prop="date"
          label="SKU编号"
          width="380"
        />
        <el-table-column
          align="center"
          prop="name"
          label="销售价格"
          width="180"
        />
        <el-table-column align="center" prop="address" label="商品库存" />
        <el-table-column align="center" prop="address" label="库存预警值" />
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="$emit('hide')">取消</el-button>
          <el-button type="primary" @click="comfirm"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";

const tableData = ref();

defineProps({
  isShow: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["hide"]);

const SKUVal = ref();

const comfirm = () => {
  ElMessage.warning("暂无sku信息");
  emit("hide");
};
</script>
<style scoped lang="less">
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.search {
  margin-bottom: 20px;
}
</style>
